<template>
  <div class="app-container home">
    <div>
      <el-input v-model="queryParams.keyword"
                placeholder="请输入关键字"
                clearable
                size="small"
                style="width: 240px; margin-right: 10px;"
                @keyup.enter.native="getList()"
      />
      <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery()">搜索</el-button>
      <el-divider direction="vertical"></el-divider>
    </div>

    <el-table v-loading="loading" :data="dataList">
      <el-table-column label="数据id" width="240" align="left" prop="_meta.dataId"/>
      <el-table-column label="版本" width="80" align="left" prop="_meta.dataVersion">
      </el-table-column>

      <el-table-column label="创建时间" align="left" prop="_meta.createTime" width="150">
        <template slot-scope="scope">
          {{parseTime(new Date(scope.row["_meta"].createTime))}}
        </template>
      </el-table-column>
      <el-table-column label="创建人" align="left" prop="_meta.userName" width="120"/>
      <el-table-column label="操作" align="left" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-warning-outline"
            @click="handleView(item.id, scope.row)"
          >详情</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleViewJson(scope.row)"
          >查看json</el-button>
          <el-dropdown style="margin-left: 10px;">
            <el-button type="text" size="mini">
              更多操作<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="handleDelete(formKey, scope.row)" divided icon="el-icon-delete">删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList(item)"
    />

    <!-- 测试运行的返回结果 -->
    <el-dialog :visible.sync="runDialog.open" :title="runDialog.title" width="40%">
      <pre>{{ JSON.stringify(runDialog.json, null, 4) }}</pre>
      <span slot="footer" class="dialog-footer">
        <el-button @click="runDialog.open = false">关闭</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
    import {getHistoryById} from "@/api/openform/formdata";

    export default {
        name: "FormDatahISList",
        data() {
            return {
                runDialog: {//测试运行弹出框
                    open: false
                    , title: "数据预览"
                    , json: "{}"
                },
                loading: false,
                total: 0,
                dataList: [],
                formKey: null,
                dataId: null,
                queryParams: {// 初始化查询参数
                    pageNum: 1,
                    pageSize: 10,
                    keyword: null
                }
            };
        },
        mounted() {
        },
        created() {
            this.formKey = this.$route.params && this.$route.params.formKey;
            this.dataId = this.$route.params && this.$route.params.dataId;
            this.getList();
        },
        methods: {
            // 查询数据
            getList() {
                this.loading = true;
                getHistoryById(this.formKey, this.dataId).then(response => {
                    this.dataList = response.rows;
                    this.total = response.total;
                    this.loading = false;
                });
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getList();
            },
            /** 跳转页面 */
            handleView(formId, row) {
                this.$router.push({ path: "/openform/view/"+formId+"/"+row["_meta"].dataId });
            },
            /** 跳转页面 */
            handleAdd(row) {
                this.$router.push({ path: "/openform/view/"+row.id });
            },
            handleViewJson(data) {
                this.runDialog.json = data;
                this.runDialog.open = true;
            },
            /** 删除按钮操作 */
            handleDelete(formKey, row) {
                const dataId = row['_meta'].dataId || this.ids;
                this.$confirm('确认删除数据?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function() {
                    return removeData(formKey, dataId);
                }).then(() => {
                    this.getList(this.selectedTab);
                    this.msgSuccess("删除成功");
                })
            },
        }
    };
</script>
<style>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    min-height: 500px;
  }
</style>
